import React, { useEffect, useState, createRef } from "react";
import { Row, Col, List, Spin, Affix } from "antd";
import {
  EyeOutlined,
  LikeOutlined,
  MessageOutlined,
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons";
import Login from "./Login";
import Advert from "./Advert";
import Nav from "./Nav";
import Link from "next/link";

const MyList = (props) => {
  const ref = createRef();
  const [list, setList] = useState(props.list);
  const [isLoading, setLoading] = useState(true);

  return (
    <div>
      <Row className="main" type="flex" justify="center">
        <Col className="left" xs={18} sm={18} md={18} lg={12} xl={14} xxl={16}>
          <Nav />
          <List
            size="large"
            itemLayout="vertical"
            dataSource={list}
            renderItem={(item) => (
              <Link
                href={{
                  pathname: "/detail",
                  query: { id: item.id },
                }}
              >
                <List.Item
                  className="listitem"
                  key={item.id}
                  actions={[
                    <EyeOutlined />,
                    <LikeOutlined />,
                    <MessageOutlined />,
                  ]}
                  extra={<img width={272} height={150} src={item.image} />}
                >
                  <List.Item.Meta
                    title={<h2>{item.title}</h2>}
                    description={item.addTime}
                  ></List.Item.Meta>
                  <div type="text" className="context">
                    {item.introduce}
                  </div>
                </List.Item>
              </Link>
            )}
          ></List>
        </Col>
        <Col className="right" xs={0} sm={0} md={0} lg={6} xl={5} xxl={4}>
          <Affix offsetTop={50}>
            <Login></Login>
            <Advert />
          </Affix>
        </Col>
      </Row>
      <div
        className="loading"
        ref={ref}
        style={{ display: isLoading ? "none" : " " }}
      >
        <Spin tip="加载更多"></Spin>
      </div>
    </div>
  );
};

export default MyList;
